<script setup>
import { ref, watch, computed, } from 'vue'

const props = defineProps({
    dialog: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object,
        default: ''
    }
})

const emit = defineEmits(['update:dialog', 'confirm'])

const handleClose = () => {

    emit('update:dialog', false)
}

const handleConfirm = () => {
    emit('confirm', {
        avatar: onlineUrl.value||avatarUrl.value,
        width: customWidth.value,
        height: customHeight.value
    })

    handleClose()
}

const localDialog = ref(props.dialog)

// 同步外部dialog变化
watch(() => props.dialog, (newVal) => {
    localDialog.value = newVal
    avatarUrl.value = props.data.url
    
})

// 头像相关逻辑
const avatarUrl = ref(props.data.url)
const isDragging = ref(false)

const handleFileChange = (file) => {
    const reader = new FileReader()
    reader.onload = (e) => {
        avatarUrl.value = e.target.result
        console.log(avatarUrl.value)
        
    }
    reader.readAsDataURL(file.raw)
    
}

const removeAvatar = () => {
    avatarUrl.value = ''
    
}

const handleDragOver = (e) => {
    e.preventDefault()
    isDragging.value = true
}

const handleDragLeave = () => {
    isDragging.value = false
}

const handleDrop = (e) => {
    e.preventDefault()
    isDragging.value = false
    if (e.dataTransfer.files.length) {
        handleFileChange({ raw: e.dataTransfer.files[0] })
    }
}

// 添加比例选项
const ratioOptions = [
    { label: '1:1', width: 100, height: 100 },
    { label: '4:3', width: 200, height: 150 },
    { label: '9:16', width: 90, height: 160 },
    { label: '3:4', width: 120, height: 160 },
]

const applyRatio = (ratio) => {
    customWidth.value = ratio.width
    customHeight.value = ratio.height
}

const customWidth = ref(props.data.width)
const customHeight = ref(props.data.height)


// 在线地址输入
const onlineUrl = ref('')

// 添加图片缩放比例计算
const previewStyle = computed(() => {
    const ratio = customWidth.value / customHeight.value
    let height = customHeight.value
    let width = customWidth.value
    
    if (height >= 200) {
        height = 200
        width = Math.round(200 * ratio)
    }
    
    return {
        height: `${height}px`,
        width: `${width}px`,
        maxHeight: '200px'
    }
})
</script>

<template>
<div>
    <el-drawer
        v-model="localDialog"
        direction="ltr"
        size="400px"
        class="avatar-editor-drawer"
        @close="handleClose"
        custom-class="my-drawer"
    >
        <template #header>
            <h3 class="drawer-title">头像编辑</h3>
        </template>
        
        <div class="drawer-main">
            <!-- 头像上传区域 -->
            <div class="avatar-section">
                <div 
                    class="avatar-uploader"
                    :class="{ 'is-dragging': isDragging }"
                    @dragover="handleDragOver"
                    @dragleave="handleDragLeave"
                    @drop="handleDrop"
                >
                    <el-upload
                        class="avatar-upload"
                        action=""
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="handleFileChange"
                    >
                        <div v-if="!avatarUrl" class="avatar-empty">
                            <el-icon :size="40"><Upload /></el-icon>
                            <p>拖拽图片到此处或点击上传</p>
                        </div>
                        <div v-else class="avatar-preview">
                            <img 
                                :src="onlineUrl||avatarUrl" 
                                class="avatar-image" 
                                :style="previewStyle"
                            />
                            <div class="avatar-actions" @click.stop="removeAvatar">
                                    <el-icon ><Close /></el-icon>
                                
                            </div>
                        </div>
                    </el-upload>
                </div>
            </div>
            
            <!-- 在线地址输入 -->
            <div class="section">
                <h4 class="section-title">或输入在线图片地址</h4>
                <div class="section-content">
                    <el-input
                        v-model="onlineUrl"
                        placeholder="https://example.com/avatar.jpg"
                      
                    >
                       
                    </el-input>
                </div>
            </div>
            
            <!-- 尺寸设置 -->
            <div class="section">
                <h4 class="section-title">头像尺寸</h4>
    <div class="section-content">
        <div class="ratio-buttons">
            <el-button
                v-for="ratio in ratioOptions"
                :key="ratio.label"
                @click="applyRatio(ratio)"
                size="small"
            >
                {{ ratio.label }}
            </el-button>
        </div>
        
        <div class="custom-size-inputs">
            <el-input-number 
                v-model="customWidth" 
                :min="50" 
                :max="1000" 
                controls-position="right"
                placeholder="宽度(px)"
                style="color:rgb(109, 40, 217);"
            />
            <span class="size-separator">×</span>
            <el-input-number 
                v-model="customHeight" 
                :min="50" 
                :max="1000" 
                controls-position="right"
                placeholder="高度(px)"
            />
        </div>
        
        <div class="current-size">
            当前尺寸: {{ customWidth }} × {{ customHeight }} 像素
        </div>
    </div>
</div>
</div>
        
        <div class="drawer-footer">
            <el-button @click="handleClose" style="color:rgb(109, 40, 217);">取消</el-button>
            <el-button type="primary" @click="handleConfirm">保存设置</el-button>
        </div>
    </el-drawer>
</div>
</template>

<style scoped>

.drawer-title {
    margin: 0;
    color: var(--el-text-color-primary);
}

.drawer-main {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: calc(100% - 120px);
    overflow-y: auto;
    background-color: var(--el-drawer-bg-color);
}

.avatar-section {
    width: 100%;
    margin-bottom: 16px;
}

.avatar-uploader {
    width: 100%;
    height: 200px;
    border: 2px dashed var(--el-border-color-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--el-fill-color-light);
    transition: all 0.3s ease;
    position: relative;
}

.avatar-uploader.is-dragging {
    border-color: var(--el-color-primary);
    background-color: var(--el-fill-color-lighter);
}

.avatar-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--el-text-color-secondary);
    padding: 20px;
    text-align: center;
}

.avatar-empty p {
    margin-top: 10px;
}

.avatar-preview {
    
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-image {
    object-fit: contain;
    transition: all 0.3s ease;
}

.avatar-actions {
    position: absolute;
    top: 0;
    right: 0;
    
    color: rgb(186, 186, 186);
    padding: 5px; 
    cursor: pointer;
    transition: all 0.3s ease;
}
.avatar-actions:hover{
    color: rgb(255, 255, 255);

}
.section {
    background-color: var(--el-fill-color-lighter);
    border-radius: 8px;
    padding: 16px;
}

.section-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--el-text-color-primary);
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.size-select {
    width: 100%;
    /* color:rgb(109, 40, 217); */
}

.custom-size-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.size-separator {
    padding: 0 8px;
    color: var(--el-text-color-secondary);
}

.current-size {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    margin-top: 8px;
}

.drawer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background-color: var(--el-bg-color);
    border-top: 1px solid var(--el-border-color-light);
}
:deep(.el-drawer) {
    --el-drawer-padding-primary: 20px;
    --el-drawer-bg-color: rgb(23, 23, 23);
    --el-text-color-primary: rgba(255, 255, 255, 0.95);  
    --el-text-color-regular: rgba(255, 255, 255, 0.8);
    --el-text-color-secondary: rgba(255, 255, 255, 0.6);
    --el-border-color-light: rgb(38, 38, 38);  
    --el-fill-color-light: rgba(255, 255, 255, 0.1);     
    --el-fill-color-lighter: rgba(255, 255, 255, 0.05);
    --el-bg-color: rgb(30, 30, 30);    
                                      
    /* Select组件颜色设置 */
    
}
.ratio-buttons .el-button {
    background-color: rgb(38, 38, 38);     
}

/* 添加比例按钮样式 */
.ratio-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

</style>